import React from "react";
import { Button, Popconfirm, Table, Card } from 'antd';
import type { TableProps } from "antd";

interface DataType {
    id: string;
    name: string;
}

const ProductList: React.FC<{ products: DataType[]; onDelete: (id: string) => void }> = ({
    onDelete, products,
}) => {
    const columns: TableProps<DataType>['columns'] = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: 'Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Action',
            key: 'action',
            render: (_, record) => {
                return (
                    <Popconfirm
                        title="Are you sure to delete this product?"
                        onConfirm={() => onDelete(record.id)}
                    >
                        <Button type="link">Delete</Button>
                    </Popconfirm>
                )
            }
        }
    ]

    return (
        <Card
            title="产品列表" // 设置卡片标题
        >
            <Table columns={columns} dataSource={products} rowKey="id" />
        </Card>
    )
};

export default ProductList;



